<!DOCTYPE html>
<html lang="en">
<head>
    <script src="../js/vue.js"></script>
    <title>收集表单数据</title>
</head>
<body>
    <!-- 
        若是：<input type="text">，收集value属性
        若是：<input type="radio">，收集value值
        若是：<input type="checkbox">
            1.没有配置value，那么收集的就是checkbox（是否勾选的布尔值）
            2.配置了value，使用字符串收集,还是bool
            3.配置了value，使用数组收集，收集就是value
        
     -->
   <div id="root">
        <form @submit.prevent='submit'>
            账号：<input type="text" v-model='userInfo.account'> <br><br>
            密码：<input type="password"  v-model='userInfo.password'> <br><br>
            性别：
                男<input type="radio" name='sex' value='0' v-model='userInfo.sex'> 
                女<input type="radio" name='sex' value='1' v-model='userInfo.sex'> <br><br>
            爱好：
                抽烟<input type="checkbox" value='chouyan' v-model='userInfo.hobby'>
                喝酒<input type="checkbox" value='hejiu' v-model='userInfo.hobby'>
                开车<input type="checkbox" value='tangtou' v-model='userInfo.hobby'> <br><br>
            所属校区：
                <select v-model='userInfo.city'>
                    <option value="">请选择</option>
                    <option value="beijing">北京</option>
                    <option value="wuhan">武汉</option>
                    <option value="shanghai">上海</option>
                    <option value="shenzhen">深圳</option>
                </select>
                <br> <br>
            其他信息：<textarea name="" id="" cols="30" rows="10" v-model='userInfo.oterInfo'></textarea>
            <br> <br>
            <input type="checkbox" v-model='userInfo.agree'>阅读并接受<a href="www.csdn.com">用户协议</a>
            <br> <br>
            <button>提交</button>
        </form>
   </div>
   <script>
       new Vue({
           el:'#root',
           data:{
            userInfo:{
                account:'',
                password:'',
                sex:'',
                hobby:[],
                city:'',
                oterInfo:'',
                agree:''
            }
           }
       });
   </script>
</body>
</html>